<template>
    <div class="sheBeiZhuangTai">
        <div :id="id" class="pie"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  export default {
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            // id:'',
            options: {
                title: '',
                data: ''
            }
        };
    },
    mounted() {
        // this.initCharts();
    },
    methods: {
        // 柱状图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(this.id));
            // 实现相应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                // toolbox: {
                //     show: true,
                //     feature: {
                //         mark: { show: true },
                //         restore: { show: true },
                //         saveAsImage: { show: true }
                //     }
                // },
                series: [
                    {
                        name: '',
                        radius: '95%',
                        type: 'gauge',
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [
                                    [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        {
                                            offset: 0.1,
                                            color: "#0B95FF"
                                        },
                                        {
                                            offset: 0.6,
                                            color: "#30D27C"
                                        },
                                        {
                                            offset: 1,
                                            color: "#FFC600"
                                        }
                                    ])
                                    ]
                                ],
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#228b22'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 10,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {    //指针大小
                            width: 3
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '79%'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                color: 'aliceblue',
                            }
                        },
                        detail: {
                            formatter: '{value}%',
                            fontSize: 20,
                            offsetCenter: [0, '25%'],
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#48b',
                                fontWeight: 'bolder'// 下面data数据的字体设置！！！！

                            }
                        },
                        data: [{ value:this.options.data, name:this.options.title }]
                    }
                ]
            };
  
            myChart.setOption(option);
        },
    },
  };
  </script>
  <style>
  .sheBeiZhuangTai {
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
  }
  
  .pie {
    width: 100%;
    height: 100%;
    margin-top: 20px;
  }
  </style>